<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/js/uploadify/jquery.uploadify.min.js" ></script>
<link rel="stylesheet" charset="utf-8" type="text/css" href="__PUBLIC__/admin/js/uploadify/uploadify.css"> 
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/js/upload.js" ></script>

<style>
	.kuan{ width: 100%; overflow: hidden; float: left; margin: 5px; }
	.bg{ background: none; border: none;}
	label{ font-size: 16px;}
.uploadify-button-text{ display: inline-flex; }
.uploadify-button-text button{ margin: -10px; }
.upviewer img{ height:90px; width: 120px; }
.upviewer ul{ margin:0px; padding:0px; }
.upviewer li{ margin:0px; padding:0px; position: relative; display:inline-block; width:120px; height:90px; background-position: center; background-size: contain; background-repeat: no-repeat; float: left; margin-right:10px; border:1px #ccc solid; background-color:#f0f0f0;}
.upviewer li a{ display:inline-block; position: absolute; bottom:0px; left:0px; text-align:center; width:100%; background-color:rgba(0,0,0,0.3); color:red; cursor: pointer; }
.upviewer li:hover a{ background-color:rgba(0,0,0,0.8); }
.red{color: red; font-weight: normal; font-size: 14;}
</style>

<div class="panel panel-default">
	  <div class="panel-heading">添加</div>
	  <div class="panel-body" style=" padding:0px 20%;">
	    
		<form action="{:U('Apt/addapt')}" method="post" id="add" onsubmit="return validation()">
			
		<div class="kuan">
		  <div class="form-group">
		  	
		    <label for="name"><span class="red">*</span>项目名:</label>	    	
		    <input type="text" class="form-control" id="name"  name="name"  placeholder="项目名" style="width: 200px;"/>
		      
		  </div>  
		</div>
		
		
		
		  <div class="kuan">
		   <div class="form-group">
		 
		 	  <label for="city"><span class="red">*</span>所属城市:</label>
		   		<select class="form-control"  name="city" form="add" id="city" style="width: 100px;">
			   	 	<option value="0">请选择</option>
			   	 	<volist name="list" id="data"  key="$key" >
						  <option value="{$data.id}">{$data.city}</option>
			  		</volist>   
				</select>	
				<div class="jgcity" class="red"></div>
				</div>
		   </div>
		    <div class="kuan area">
		   <div class="form-group">
		 
		 	  <label for="area"><span class="red">*</span>所属区域:</label>
		 	
		   		 <select class="form-control"  name="area" form="add" id="area" style="width: 100px;">	   	 	 
				</select>	
				<div class="jgarea" class="red"></div>
				</div>
		   </div>
		   
		    <div class="kuan sc">
		   <div class="form-group">
		 
		 	  <label for="sc"><span class="red">*</span>所属服务中心:</label>
		   		 <select class="form-control"  name="sc" form="add" id="sc" style="width: 200px;">	   	 	
				</select>	
				
				</div>
		   </div>
		   
		   <div class="kuan">
		  <div class="form-group">
		  	
		    <label for="tel"><span class="red">*</span>电话:</label>	    	
		    <input type="tel" class="form-control" id="tel"  name="tel"  placeholder="电话" style="width: 200px;"/>
		      
		  </div>  
		</div>
		
		<div class="kuan">
		  <div class="form-group">		  	
		    <label for="email"><span class="red">*</span>邮箱:</label>	    	
		    <input type="email" class="form-control" id="email"  name="email"  placeholder="邮箱" style="width: 200px;"/>
		      
		  </div>  
		</div>
		
		<div class="kuan">
		  <div class="form-group">
		  	
		    <label for="dz"><span class="red">*</span>位置:</label>	    	
		    <input type="text" class="form-control" id="dz"  name="dz"  placeholder="地址" style="width: 200px;"/>
		      
		  </div>  
		</div>
		   
		   
		  <div class="kuan">
		  <div class="form-group">
		  
		    <label for="url">VR链接:</label>	    	
		    <input type="url" class="form-control" id="url"  name="url"  placeholder="VR链接" style="width: 400px;" />
		     
		  </div>  
		</div> 
		
		 <div class="kuan">
		    <div class="form-group" >
		    	
		   		 <label for="content" ><span class="red">*</span>简述:</label> 				
		    	   <textarea  class="form-control" id="content" name="content"  style="width: 400px; height: 200px;" placeholder="简述" form="add"></textarea>
					
		  	</div>
		   </div>
		   
		   		
		 <div class="kuan">
		    <div class="form-group" >
		    	
		   		 <label for="jtxl" ><span class="red">*</span>交通线路:</label> 				
		    	   <textarea  class="form-control" id="jtxl" name="jtxl"  style="width: 400px; height: 80px;" placeholder="简述" form="add"></textarea>
					
		  	</div>
		   </div>
		   
		   <div class="kuan">
		    <div class="form-group" >
		    	
		   		 <label for="listimg" ><span class="red">*</span>列表图:<span class="red">(只能有一张)(图片大小不能超过1M)</span></label> 				
		    	 <input type="file" class="form-control" id="upload" placeholder="列表图"> <br /> 
		    	  <input type="hidden" name="listimg"  id="listimg"> 
		    	<div id="view" class="upviewer"></div>
				 
			
		  </div>
		   </div>
		   
		    <div class="kuan">
		    <div class="form-group" >
		    	
		   		 <label for="kvupload" ><span class="red">*</span>轮播图:<span class="red">(最多有6张)(图片大小不能超过1M)</span></label> 				
		    	 <input type="file" class="form-control" id="kvupload" placeholder="轮播图"> <br /> 
		    	  <input type="hidden" name="kvimg"  id="kvimg"> 
		    	<div id="kvview" class="upviewer"></div>
					
		  	</div>
		   </div>
		   			      	

		      <div class="kuan">
		    <div class="form-group" >	    	
		   		 <label for="motupload" ><span class="red">*</span>交通与位置:<span class="red">(只能有1张)(图片大小不能超过1M)</span></label> 				
		    	 <input type="file" class="form-control" id="motupload" placeholder="交通图"> <br /> 
		    	  <input type="hidden" name="motimg"  id="motimg"> 
		    	<div id="motview" class=" upviewer" ></div>					
		  	</div>
		   </div>
		     
		      <div class="kuan">
		    <div class="form-group" >
		    	
		   		 <label for="psupload" ><span class="red">*</span>公寓照片:<span class="red">(最多有20张)(图片大小不能超过1M)</span></label> 				
		    	 <input type="file" class="form-control" id="psupload" placeholder="照片"> <br /> 
		    	  <input type="hidden" name="psimg"  id="psimg"> 
		    	<div id="psview" class=" upviewer" ></div>
					
		  	</div>
		   </div> 
		   
		   
		   
		      <div class="kuan">
		    <div class="form-group" >
		    	
		   		 <label for="psupload" >服务项目</label> <br/>	
		   		 <div style=" width: 100%; float: left;">
		   		 	<p>基础服务：</p>
		    		<volist name="arr" id="data"  key="$key" >
					<if condition="$data.type eq 0"><div style=" float: left; height: 30px; line-height: 30px; padding-left: 20px;">{$data.name}<input type="checkbox" name="fw[]" value="{$data.id}" checked/></div></if>
			  		</volist>  
			  		</div>
					<div style=" width: 100%; float: left;">
						<p>增值服务：</p>
					<volist name="arr" id="data"  key="$key" >
					<if condition="$data.type eq 1"><div style=" float: left; height: 30px; line-height: 30px; padding-left: 20px;">{$data.name}<input type="checkbox" name="fw[]" value="{$data.id}" checked/></div></if>
			  		</volist> 
			  		</div>
		  	</div>
		   </div> 
		    		     
		   <div class="kuan">
		   <div class="form-group">		   
		    <label for="map"><span class="red">*</span>定位地址：</label>		   
		    <input type="text" class="form-control" id="map"  name="map"  placeholder="位置" oninput="searchByStationName()" style="width: 400px;">
					  
					<div class="span6" id="allmap" style=" display: none;width: 400px; margin-top: 20px;   height: 400px; ">	
				</div>
			
					
			</div>
		  </div>
			 
			
				<div class="col-sm-4" style="padding-top: 30px; clear: both;">
		  <button type="submit" class="btn btn-primary">添加</button>
		  </div>
		</form>
		 </div>  
	  </div>
	
	
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=7QZaD80e6MZCRY4jXjM5lXRWpfg5R1m1"></script>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");  // 创建Map实例
	 // 初始化地图,用城市名设置地图中心点
	map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
	var localSearch = new BMap.LocalSearch(map);
	function searchByStationName(){
		map.clearOverlays();//清空原来的标注
		var keyword=$("#map").val();
	    localSearch.setSearchCompleteCallback(function (searchResult) {
        var poi = searchResult.getPoi(0);      
        map.centerAndZoom(poi.point, 17);
        var myIcon = new BMap.Icon("__PUBLIC__/admin/image/dtb.gif", new BMap.Size(80,80));//图标
        var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat),{icon:myIcon});  // 创建标注，为要查询的地方对应的经纬度
        map.addOverlay(marker);      
        marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); });
    });
	
	localSearch.search(keyword);
	$("#allmap").fadeIn();
	}

$(function(){
	initDelFile();
	//多文件上传
	initUploadify({ ID:'upload',url:"{:U('Upload/upload')}",success:function(obj){ 
		if(obj.s){
			$('#view').append('<li><img src="'+obj.d+'"/><a d_path="'+obj.d+'">删除</a></li>');
			initDelFile();
		}else{
			alert(obj.m);
		}
	} });
	initUploadify({ ID:'psupload',url:"{:U('Upload/upload')}",success:function(obj){ 
		if(obj.s){
			$('#psview').append('<li><img src="'+obj.d+'"/><a d_path="'+obj.d+'">删除</a></li>');
			initDelFile();
		}else{
			alert(obj.m);
		}
	} });
	initUploadify({ ID:'motupload',url:"{:U('Upload/upload')}",success:function(obj){ 
		if(obj.s){
			$('#motview').append('<li><img src="'+obj.d+'"/><a d_path="'+obj.d+'">删除</a></li>');
			initDelFile();
		}else{
			alert(obj.m);
		}
	} });
	initUploadify({ ID:'kvupload',url:"{:U('Upload/upload')}",success:function(obj){ 
		if(obj.s){
			$('#kvview').append('<li><img src="'+obj.d+'"/><a d_path="'+obj.d+'">删除</a></li>');
			initDelFile();
		}else{
			alert(obj.m);
		}
	} });
	
	
	$area=$('.area');
	$sc=$('.sc');
	
	$area.hide();
	$sc.hide();
	$("#city").change(function(){
		$id=$(this).val();
		$url="{:U('Apt/areald')}?cid="+$id;
		$.getJSON($url,function(obj){
			if(obj.s=="true"){
				$area.show();
				$areaval=eval(obj.m);
				$('#area').empty();
				$(".jgcity").empty();
				for(var i=0;i<$areaval.length;i++){
					var html="<option value="+$areaval[i]['id']+">"+$areaval[i]['area']+"</option>"
					$('#area').append(html);
				}
				area();
				$("#area").change();
			}else{
				$area.hide();
				$(".jgcity").html("该城市尚未设置区域,请先为该城市添加区域"); 
				
				$('#area').val(0);
			}
		})
		
	});
	
	area();
	function area(){
				$("#area").change(function(){
					$id=$(this).val();
					$url="{:U('Apt/scld')}?aid="+$id;
					$.getJSON($url,function(obj){
						if(obj.s=="true"){
							$sc.show();
							$scval=eval(obj.m);
							$('#sc').empty();
							$(".jgarea").empty();
							for(var i=0;i<$scval.length;i++){
								var html="<option value="+$scval[i]['id']+">"+$scval[i]['sc']+"</option>"
								$('#sc').append(html);
							}
						}else{
							$sc.hide();
							$(".jgarea").html("该区域尚未设置服务中心,请先为该区域添加服务中心");
							$('#sc').val(0);
						}
					});
				});
	}
	
	
	
});

function initDelFile(){
	$('.upviewer li a').unbind('click').click(function(){
		if(!confirm('你确认删除吗?')) return false;
		var _this = $(this);
		var dpath = $(_this).attr('d_path');
		if(!dpath) return false;
		$.post('{:U('Upload/delfile')}',{filepath:dpath},function(obj){ 
			if(obj.s){ 
				$(_this).parents('li').remove();
			}else{
				alert(obj.m);
				$(_this).parents('li').remove();
			} 
		},'json');
	});
}

	



	

//验证	
	function validation(){		
		var name=$('#name').val();
		if(name=="")
		{
			alert('请填写小区');
			 return false; 
		}
		var city=$('#city').val();
		if(city==0)
		{
			alert('请选择所属城市');
			 return false; 
		}
		var area=$('#area').val();
		
		if(area==null)
		{
			alert('请选择所属区域');
			 return false; 
		}
		
		var sc=$('#sc').val();
		
		if(sc==null)
		{
			alert('请选择所属服务中心');
			 return false; 
		}
		

		
		var email=$('#email').val();
		var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
		if(!myreg.test(email))
		{
			alert('请输入有效的E_mail！');
			 return false; 
		}
		
		var dz=$('#dz').val();
		if(dz=="")
		{
			alert('请填写位置');
			 return false; 
		}
		
		var content=$('#content').val();
		if(content=="")
		{
			alert('请填写简述');
			 return false; 
		}
		var cmap=$('#map').val();
		if(cmap=="")
		{
			alert('请填写定位地址');
			 return false; 
		}
		
		var jtxl=$('#jtxl').val();
		if(jtxl=="")
		{
			alert('请填写交通路线');
			 return false; 
		}
		
		var img=$('#view').html().trim();//获取值		
		var	listimg=$('#listimg').val(img);//写入值
		var listnum=document.getElementById("view").getElementsByTagName("img");//验证数量
		if(img=="")
		{
			alert('请上传列表图');
			 return false; 
		}
		if(listnum.length>1)
		{
			alert('列表图只能有一张');
			 return false; 
		}
		
		var kv=$('#kvview').html().trim();		
		var	kvimg=$('#kvimg').val(kv);
	
		var kvnum=document.getElementById("kvview").getElementsByTagName("img");
		if(kv=="")
		{
			alert('请上传kv图');
			 return false; 
		}
		if(kvnum.length>6)
		{
			alert('kv图不能超过六张');
			 return false; 
		}
		
		
		var mot=$('#motview').html().trim();		
		var	motimg=$('#motimg').val(mot);
	
		var motnum=document.getElementById("motview").getElementsByTagName("img");
		if(mot=="")
		{
			alert('请上传交通图');
			 return false; 
		}
		if(motnum.length>1)
		{
			alert('交通图只能有一张');
			 return false; 
		}
		
		
		var ps=$('#psview').html().trim();		
		var	psimg=$('#psimg').val(ps);	
		var psnum=document.getElementById("psview").getElementsByTagName("img");
		if(ps=="")
		{
			alert('请上传照片');
			 return false; 
		}
		if(psnum.length>20)
		{
			alert('照片不能超过二十张');
			 return false; 
		}
		
		
		 return true; 
	
	}


</script>